<template>
  <div class="echarts" v-if="isShow">
    <div class="echarts-main" ref="main"></div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  name: "EChartsPart",
  data() {
    return {
      myEcharts: null,
      isShow: true
    };
  },
  mounted() {
    this.isShow = true;
    this.myEcharts = echarts.init(this.$refs["main"]);
    this.option = {
      legend: {},
      tooltip: {
        trigger: "axis",
        showContent: false
      },
      dataset: {
        source: [
          ["product", "2019-01-01", "2019-01-02", "2019-01-03", "2019-01-04", "2019-01-05", "2019-01-06"],
          ["提交数", 41, 30, 65, 53, 83, 98],
          ["正确数", 30, 21, 43, 33, 50, 70],
          ["错误数", 11, 9, 22, 20, 33, 28],
        ]
      },
      xAxis: { type: "category" },
      yAxis: { gridIndex: 0 },
      grid: { top: "55%" },
      series: [
        { type: "line", smooth: true, seriesLayoutBy: "row" },
        { type: "line", smooth: true, seriesLayoutBy: "row" },
        { type: "line", smooth: true, seriesLayoutBy: "row" },
        {
          type: "pie",
          id: "pie",
          radius: "30%",
          center: ["50%", "25%"],
          label: {
            formatter: "{b}: {@2019-01-06} ({d}%)"
          },
          encode: {
            itemName: "product",
            value: "2019-01-06",
            tooltip: "2019-01-06"
          }
        }
      ]
    };
    this.myEcharts.on('updateAxisPointer', (event) => {
        let xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            let dimension = xAxisInfo.value + 1;
            this.myEcharts.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });
    this.myEcharts.setOption(this.option);
  },
  beforeDestroy() {
    this.myEcharts.dispose();
    this.isShow = false;
  }
};
</script>

<style lang="less" scoped>
.echarts {
  height: 600px;
  &-main {
    height: 100%;
    width: 100%;
  }
}
</style>